<template>
  <div class='wrap'>
    <div class='container w'>
      <el-tabs type="border-card">
        <el-tab-pane>
          <span slot="label"><i class="el-icon-s-goods"></i> 收藏的商品</span>
           <GoodsDelete :data="list"/>
        </el-tab-pane>
         <el-tab-pane>
          <span slot="label"><i class="el-icon-s-shop"></i> 收藏的店铺</span>
          <Merchant />
        </el-tab-pane>
      </el-tabs>
    </div>
   </div>
</template>

<script>
import GoodsDelete from '@/mall/views/components/GoodsDelete'
import Merchant from '@/mall/views/Favorites/components/Merchant'
  export default {
    name: 'Favorites',
    components: {GoodsDelete,Merchant},
    data() {
      return {
        list: [
        {
          id: 0,
          goodsName: "想学C++不用翻教材 百度大牛带你结合实践重学C++ ",
          goodPicture: require("@/assets/common/list1.png"),
          goodPrice: 448.0,
          like: 4971,
        },
        {
          id: 1,
          goodsName: "Python3入门机器学习 经典算法与应用  入行人工智能 ",
          goodPicture: require("@/assets/common/list2.png"),
          goodPrice: 499.0,
          like: 2669,
        },
        {
          id: 2,
          goodsName: "Vue3+ElementPlus+Koa2 全栈开发后台系统",
          goodPicture: require("@/assets/common/list3.png"),
          goodPrice: 368.0,
          like: 699,
        },
        {
          id: 3,
          goodsName: "前端框架及项目面试 聚焦Vue3/React/Webpack",
          goodPicture: require("@/assets/common/list4.png"),
          goodPrice: 399.0,
          like: 3450,
        },
        {
          id: 4,
          goodsName: "体系课-数据可视化入门到精通-打造前端差异化竞争力",
          goodPicture: require("@/assets/common/list5.png"),
          goodPrice: 848.0,
          like: 1127,
        },
        {
          id: 5,
          goodsName: "Google资深工程师深度讲解Go语言 由浅入深掌握Go语言",
          goodPicture: require("@/assets/common/list6.png"),
          goodPrice: 399.0,
          like: 5246,
        },
        {
          id: 6,
          goodsName: "Kubernetes 入门到进阶实战，系统性掌握 K8s 生产实践 ",
          goodPicture: require("@/assets/common/list7.png"),
          goodPrice: 299.0,
          like: 664,
        },
        {
          id: 7,
          goodsName: "大学计算机必修课新讲--编译原理+操作系统+图形学",
          goodPicture: require("@/assets/common/list8.png"),
          goodPrice: 399.0,
          like: 1456,
        },
        {
          id: 8,
          goodsName: "大学计算机必修课新讲--编译原理+操作系统+图形学",
          goodPicture: require("@/assets/common/list8.png"),
          goodPrice: 399.0,
          like: 1456,
        },
        {
          id: 9,
          goodsName: "大学计算机必修课新讲--编译原理+操作系统+图形学",
          goodPicture: require("@/assets/common/list8.png"),
          goodPrice: 399.0,
          like: 1456,
        },
      ],
      };
    },
    created() {},
    methods: {}, 
  };
</script>
<style lang="scss" scoped>
.container{
  width:1202px;
  margin:0 auto;
}
::v-deep .el-tabs__content{
  padding:15px 0;
}
.GoodsDelete{

}
.GoodsDelete:not(:nth-child(5n)) {
  margin-right: 25px;
}
.GoodsDelete:last-child:nth-child(5n - 1) {
  margin-right: calc(220px + 25px);
}
.GoodsDelete:last-child:nth-child(5n - 2) {
  margin-right: calc(220px + 220px + 25px + 25px);
}
.GoodsDelete:last-child:nth-child(5n - 3) {
  margin-right: calc(220px + 220px + 220px + 25px + 25px + 25px);
}
</style>